<template>
  <header class="header">
    <div class="header-content">
      <div class="block">
       <img src="@/assets/logo.png" alt="Logo" style="height: 30px; margin-right: 15px;border-radius: 50%;">
       <span class="demonstration">可选背景色</span>
       <el-color-picker v-model="color1" @change="changeHeaderBgColor"></el-color-picker>
       </div>
      <router-link to="/blog" class="nav-link">首页
      </router-link>
      <router-link to="/SiteAbout" class="nav-link">关于
      </router-link>
      <div class="welcome-logout-group">
        <!-- 修改此处，添加 <strong> 标签 -->
        <div v-if="userStore.username">欢迎，<strong>{{ userStore.username }}</strong>！</div>
        <div v-else>请先登录。</div>
        <button v-if="userStore.username" @click="logout">退出登录</button>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useUserStore } from '../stores/userStore';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { HomeFilled, QuestionFilled } from '@element-plus/icons-vue';
// 导入新图标
import { ElIconSHome } from '@element-plus/icons-vue'; 

const userStore = useUserStore();
const router = useRouter();
// 修改初始值为 #EFF2F1
const color1 = ref('#EFF2F1');

const logout = () => {
  userStore.logout();
  router.push('/login');
};

const changeHeaderBgColor = () => {
  const headerElement = document.querySelector('.header');
  if (headerElement) {
    headerElement.style.backgroundColor = color1.value;
  }
};

onMounted(() => {
  const headerElement = document.querySelector('.header');
  if (headerElement) {
    // 组件挂载时设置背景色
    headerElement.style.backgroundColor = color1.value;
  }
});
</script>

<style scoped>
.header {
  padding: 10px;
  /* 移除固定背景色，由 JS 动态设置 */
  /* background-color: #f0f0f0; */ 
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  margin-right: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* 添加激活状态下的样式 */
.nav-link.router-link-active {
  text-decoration: underline;
}

.nav-icon {
  color: #409EFF;
  margin-right: 5px;
  font-size: 20px; /* 增加图标尺寸 */
}

.welcome-logout-group {
  display: flex;
  align-items: center;
  gap: 10px; /* 调整欢迎信息和退出登录按钮之间的间距 */
}

.block {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
</style>